<script >
import Time from '../component/time.vue'
import * as echarts from 'echarts'
export default {
    components: { Time },
    data() {
        return {
            formInline: {},
            // echarts的数据
            // #region
            option1: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec', '#68bbc4'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '来液情况',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    },
                    {
                        text: '乌尔禾和夏子街来液',
                        top: 40,
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '30%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '乌木禾来液',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ]
                    },
                    {
                        name: '夏子街来液',
                        type: 'line',
                        data: [
                            55555, 55520, 55536, 55510, 55510, 55520, 51203,
                            53621
                        ]
                    }
                ]
            },
            option2: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#70a2fc', '#68bbc4'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '产油情况',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    },
                    {
                        text: '总产油和外输油',
                        top: 40,
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '30%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '总产油量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        label: {
                            position: 'top',
                            show: true,
                            color: '#79b0fe'
                            // formatter: '{c} %'
                        }
                    },
                    {
                        name: '外输油量',
                        type: 'bar',
                        data: [
                            55555, 55520, 55536, 55510, 55510, 55520, 51203,
                            53621
                        ],
                        label: {
                            position: 'top',
                            show: true,
                            color: '#68bbc4'
                            // formatter: '{c} %'
                        }
                    }
                ]
            },
            option3: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f2bd42', '#85d0dc', '#70b07a'],

                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '31%',
                    top: '14%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 10,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '一段浓度',
                        type: 'line',
                        data: [60, 80, 88, 90, 96, 90],
                        label: {
                            show: true,
                            color: '#f2bd42'
                            // formatter: '{c} %'
                        }
                    },
                    {
                        name: '二段浓度',
                        type: 'line',
                        data: [60, 61, 60, 65, 66, 58],
                        label: {
                            show: true,
                            color: '#85d0dc'
                            // formatter: '{c} %'
                        }
                    },
                    {
                        name: '综合浓度',
                        type: 'line',
                        data: [102, 102, 100, 100, 106, 100],
                        label: {
                            show: true,
                            color: '#70b07a'
                            // formatter: '{c} %'
                        }
                    }
                ]
            },
            option4: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#6cff16'],
                title: {
                    top: 20,
                    left: 10,
                    text: '总来液量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: [
                        '07/16',
                        '07/17',
                        '07/18',
                        '07/19',
                        '07/20',
                        '07/21',
                        '07/22',
                        '07/23'
                    ]
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '总来液量',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ]
                    }
                ]
            },
            option5: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f6d26a'],
                title: {
                    top: 20,
                    left: 10,
                    text: '库存油量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: [
                        '07/16',
                        '07/17',
                        '07/18',
                        '07/19',
                        '07/20',
                        '07/21',
                        '07/22',
                        '07/23'
                    ]
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '库存油量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        label: {
                            show: true,
                            color: '#f6d26a',
                            position: 'top'
                        }
                    }
                ]
            },
            option6: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '26%',
                    top: '14%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 10,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '总进水量',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        label: {
                            show: true,
                            color: '#75f9fd'
                            // formatter: '{c} %'
                        }
                    }
                ]
            },
            option7: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '高低油',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    },
                    {
                        text: '高油',
                        top: 40,
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '30%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '高油',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#75f9fd',
                            position: 'top'
                        }
                    }
                ]
            },
            option8: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '毛纯油量',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    },
                    {
                        text: '毛油量',
                        top: 40,
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '30%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '高油',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#5087ec',
                            position: 'top'
                        }
                    }
                ]
            },
            option9: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#6cff16'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '含水',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '30%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '含水',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#6cff16',
                            position: 'top'
                        }
                    }
                ]
            },
            option10: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: {
                    top: 20,
                    left: 10,
                    text: '低油',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '低油',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        label: {
                            show: true,
                            color: '#5087ec',
                            position: 'top'
                        }
                    }
                ]
            },
            option11: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#42f2e9'],
                title: {
                    top: 20,
                    left: 10,
                    text: '纯油量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '纯油量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        label: {
                            show: true,
                            color: '#42f2e9',
                            position: 'top'
                        }
                    }
                ]
            },
            option12: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#ff4300'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '罐温',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '罐温',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#ff4300',
                            position: 'top'
                        }
                    }
                ]
            },
            option13: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#6cff16'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '排水量',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '排水量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#6cff16',
                            position: 'top'
                        }
                    }
                ]
            },
            option14: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#d3ec50'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '反应器水量',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '反应器水量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#d3ec50',
                            position: 'top'
                        }
                    }
                ]
            },
            option15: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '过滤器水量',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '过滤水量',
                        type: 'bar',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#5087ec',
                            position: 'top'
                        }
                    }
                ]
            },
            option16: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#ff5100'],
                title: [
                    {
                        top: 5,
                        left: 'center',
                        text: '油区',
                        textStyle: {
                            color: '#F28C42',
                            fontSize: 20
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 70,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '破乳剂(mg/L)',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#ff5100',
                            position: 'top'
                        }
                    }
                ]
            },
            option17: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],

                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '26%',
                    top: '14%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 10,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '净水剂',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            54712
                        ],
                        // 75f9fd
                        label: {
                            show: true,
                            color: '#75f9fd',
                            position: 'top'
                        }
                    }
                ]
            },
            //   #endregion
            options: [
                this.option1,
                this.option2,
                this.option3,
                this.option4,
                this.option5,
                this.option6,
                this.option7,
                this.option8,
                this.option9,
                this.option10,
                this.option11,
                this.option12,
                this.option13,
                this.option14,
                this.option15,
                this.option16,
                this.option17
            ]
        }
    },
    mounted() {
        // 注意：由于 Vue 的响应式系统，直接在 data 函数中引用 this.optionX 可能会导致问题
        // 因此，你可能需要在 mounted 钩子中重新构建 options 数组
        this.options = [
            this.option1,
            this.option2,
            this.option3,
            this.option4,
            this.option5,
            this.option6,
            this.option7,
            this.option8,
            this.option9,
            this.option10,
            this.option11,
            this.option12,
            this.option13,
            this.option14,
            this.option15,
            this.option16,
            this.option17
        ]
        // 基于准备好的dom，初始化echarts实例
        this.initChart()
    },

    methods: {
        initChart() {
            // 使用 for 循环遍历数组
            // let itemCharts = []
            for (let i = 0; i < this.options.length; i++) {
                // 构造 DOM 元素的 ID
                const chartDomClass = `chart${i + 1}`
                // console.log(chartDomClass);
                // // 获取 DOM 元素
                const chartItemDom = document.querySelector('.' + chartDomClass)

                // 给各个表格加宽度和高度
                chartItemDom.style.width = '100%'
                chartItemDom.style.height = '100%'
                // console.log(chartItemDom)

                // console.log(this.options);

                // 初始化 ECharts 实例
                const itemChart = echarts.init(chartItemDom)
                // itemCharts.push(itemChart)
                // 设置配置项
                itemChart.setOption(this.options[i], true)
                window.addEventListener('resize', function () {
                    itemChart.resize()
                })
            }
            // console.log(itemCharts)
            // window.addEventListener('resize', function () {
            //     for (let i = 0; i < itemCharts.length; i++) {
            //         itemChart[i].resize()
            //     }
            // })
        }
    }
}
</script>

<template>
    <div class="container">
        <div class="title-container">
            稀油注输联合站
            <!-- 时间表 -->
            <p class="time"><Time /></p>
            <img
                class="title-img"
                style="height: 70px; width: 100%"
                src="../../../assets/imgs/head1.png"
            />
        </div>
        <div class="bottom">
            <!-- 原油处理 -->
            <div class="crude-charging">
                <!-- 上部分 -->
                <div class="title">原油处理</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart1" /></div>
                    <div class="chart-item"><div class="chart2" /></div>
                    <div class="chart-item">
                        <div class="chart-title">破乳剂使用分析</div>
                        <el-form
                            :inline="true"
                            :model="formInline"
                            class="form"
                            size="mini"
                        >
                            <el-form-item
                                label="选择药剂"
                                style="color: aliceblue"
                            >
                                <el-select
                                    style="width: 100px"
                                    v-model="formInline.region"
                                    placeholder="选择药剂"
                                    clearable
                                >
                                    <el-option
                                        label="正相破乳剂"
                                        value="tiaojinkou"
                                    ></el-option>
                                    <el-option
                                        label="反相破乳剂"
                                        value="tiaochukou"
                                    ></el-option>
                                    <el-option
                                        label="SAGD预处理剂"
                                        value="fanchukou"
                                    ></el-option>
                                    <el-option
                                        label="SAGD正相破乳剂"
                                        value="erchukou"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="chart3" />
                    </div>
                    <div class="chart-item"><div class="chart4" /></div>
                    <div class="chart-item"><div class="chart5" /></div>
                    <div class="chart-item">
                        <div class="chart-title">原油交接情况</div>
                        <el-form
                            :inline="true"
                            :model="formInline"
                            class="form"
                            size="mini"
                        >
                            <el-form-item
                                label="选择指标"
                                style="color: aliceblue"
                            >
                                <el-select
                                    style="width: 100px"
                                    v-model="formInline.region"
                                    placeholder="选择指标"
                                    clearable
                                >
                                    <el-option
                                        label="低液位(m)"
                                        value="tiaojinkou"
                                    ></el-option>
                                    <el-option
                                        label="视密(mg/cm³)"
                                        value="tiaochukou"
                                    ></el-option>
                                    <el-option
                                        label="标密(mg/cm³)"
                                        value="fanchukou"
                                    ></el-option>
                                    <el-option
                                        label="罐温℃"
                                        value="erchukou"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="chart6" />
                    </div>
                </div>
            </div>

            <!-- 交油情况 -->
            <div class="fuel-delivery">
                <!-- 上部分 -->
                <div class="title">交油情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart7" /></div>
                    <div class="chart-item"><div class="chart8" /></div>
                    <div class="chart-item"><div class="chart9" /></div>
                    <div class="chart-item"><div class="chart10" /></div>
                    <div class="chart-item"><div class="chart11" /></div>
                    <div class="chart-item"><div class="chart12" /></div>
                </div>
            </div>

            <!-- 污水处理量 -->
            <div class="sewage-treatment">
                <!-- 上部分 -->
                <div class="title">污水处理量</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart13" /></div>
                    <div class="chart-item"><div class="chart14" /></div>
                    <div class="chart-item"><div class="chart15" /></div>
                </div>
            </div>

            <!-- 药剂情况 -->
            <div class="pharmaceutical-condition">
                <!-- 上部分 -->
                <div class="title">药剂情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart16" /></div>
                    <div class="chart-item">
                        <div class="chart-title">水区</div>
                        <el-form
                            :inline="true"
                            :model="formInline"
                            class="form"
                            size="mini"
                        >
                            <el-form-item
                                label="选择药剂"
                                style="color: aliceblue"
                            >
                                <el-select
                                    style="width: 100px"
                                    v-model="formInline.region"
                                    placeholder="选择药剂"
                                    clearable
                                >
                                    <el-option
                                        label="净水剂"
                                        value="tiaojinkou"
                                    ></el-option>
                                    <el-option
                                        label="絮凝剂"
                                        value="tiaochukou"
                                    ></el-option>
                                    <el-option
                                        label="除油剂"
                                        value="fanchukou"
                                    ></el-option>
                                    <el-option
                                        label="阻垢剂"
                                        value="erchukou"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="chart17" />
                    </div>
                    <div class="chart-item" />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 120%;
    margin-bottom: 50px;
    background-color: #02104f;
    border: 1px solid #797979;
}
.title-container {
    height: 80px;
    position: relative;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    color: white;
    border-bottom: solid 2px #293e83;
    .time {
        font-size: 15px;
        position: absolute;
        right: 5%;
        top: 0;
        font-weight: normal;
    }
}

.title-img {
    position: absolute;
    top: 0;
    left: 0;
}

.bottom {
    background-color: #202033;
}
/* 原油处理 */
/* 05B2D1 */
.crude-charging {
    border-bottom: solid 2px #05b2d1;
    .title {
        padding-left: 20px;
        color: #05b2d1;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #05b2d1;
    }
}

//   chart样式
.chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    .chart-item {
        height: 450px;
        width: 33%;
        background-color: #0b1539;
        overflow: hidden;
        // border: 2px solid #33a2f8;
    }
}

// 交油情况
.fuel-delivery {
    border-bottom: solid 2px #6cff16;
    .title {
        padding-left: 20px;
        color: #6cff16;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #6cff16;
    }
}

// 污水处理量
.sewage-treatment {
    border-bottom: solid 2px #75f9fd;
    .title {
        padding-left: 20px;
        color: #75f9fd;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #75f9fd;
    }
}

// 药剂情况
.pharmaceutical-condition {
    border-bottom: solid 2px #f2bd42;
    .title {
        padding-left: 20px;
        color: #f2bd42;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #f2bd42;
    }
}

// 特殊格式带有选择框的

.chart-title {
    font-size: 20px;
    color: #f28c42;
    font-weight: 800;
    text-align: center;
    margin-top: 5px;
}
::v-deep .el-form {
    margin-top: 8px;
    height: 30px;
}

::v-deep .el-form-item:first-child {
    margin-right: 30px;
}
::v-deep .el-form-item__label {
    color: #fff;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 10px;
    // margin-right: 10px;
}
::v-deep .el-input__inner {
    background-color: transparent !important;
    border: 0.5px solid #3f8fa5;
    color: white;
}
</style>
